<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		section {
			width: 550px;
			height: 150px;
			background-color: gray;
		}

		/* 逻辑操作符 and */
		@media (min-width:750px) and (max-width:1200px) {
			section:nth-of-type(1) {
				background-color: gold;
			}
		}

		/*
		 * 还可以加媒体类型，注意后面要跟 and 操作符
		 * 
		 */
		@media screen and (min-width:750px) and (max-width:1200px) {
			section:nth-of-type(2) {
				background-color: green;
			}
		}

		/*
		 * 通过 逗号 操作符，可以让其支持多种媒体类型
		 * 注意逗号前后都为单独的规则组
		 */
		@media print,
		screen and (min-width:750px) and (max-width:1200px) {
			section:nth-of-type(3) {
				background-color: salmon;
			}
		}
	</style>
</head>

<body>
	<div class="container">
		<section>
			<ol>
				<li>750px ~ 1200px 区间内就会生效 </li>
			</ol>
		</section>
		<section>
			<ol>
				<li>screen 模式下的 750px ~ 1200px 才会生效 </li>
			</ol>
		</section>
		<section>
			<ol>
				<li>在print模式下生效 </li>
				<li>在screen模式下，宽度在750px~1200px的情况下会生效</li>
			</ol>
		</section>
	</div>
</body>

</html>